<template>
    <div>
        <!--tabs-->
        <el-tabs type="card" class="tabs" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="已发起" name="seven">
                <SignTable :tableData="tableData" :activeName="activeName" :loading="loading" @getDetail="currentDetail" @preview="preview" @cancel="cancel"></SignTable>
                <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>
            </el-tab-pane>
            <el-tab-pane label="待乙方签署" name="one">
                <!--表格数据-->
                <SignTable :tableData="tableData" :activeName="activeName" :loading="loading" @getDetail="currentDetail" @preview="preview" @cancel="cancel"></SignTable>
                <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>
            </el-tab-pane>
            <el-tab-pane label="待甲方签署" name="two">
                <!--表格数据-->
                <SignTable :tableData="tableData" :activeName="activeName" :loading="loading" @getDetail="currentDetail" @preview="preview" @cancel="cancel"></SignTable>
                <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>
            </el-tab-pane>
            <el-tab-pane label="待支付" name="three">
                <!--表格数据-->
                <SignTable :tableData="tableData" :activeName="activeName" :loading="loading" @getDetail="currentDetail" @preview="preview" @cancel="cancel"></SignTable>
                <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>
            </el-tab-pane>
            <el-tab-pane label="待审核" name="four">
                <!--表格数据-->
                <SignTable :tableData="tableData" :activeName="activeName" :loading="loading" @getDetail="currentDetail" @preview="preview" @cancel="cancel" @audit="audit"></SignTable>
                <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>
            </el-tab-pane>
            <el-tab-pane label="已审核" name="five">
                <!--表格数据-->
                <SignTable :tableData="tableData" :activeName="activeName" :loading="loading" @getDetail="currentDetail" @preview="preview" @cancel="cancel"></SignTable>
                <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>
            </el-tab-pane>
            <el-tab-pane label="已作废" name="six">
                <!--表格数据-->
                <SignTable :tableData="tableData" :activeName="activeName" :loading="loading" @getDetail="currentDetail" @preview="preview" @cancel="cancel"></SignTable>
                <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>
            </el-tab-pane>
        </el-tabs>

        <!--详情的dialog-->
        <el-dialog
                :visible.sync="dialogDetail"
                width="75%">
            <!--这里的插槽会替换title显示的内容-->
            <div slot="title" class="header-title">
                <p class="title-name">签署进度 <span style="color: #409EFF;padding-left: 8px">发起人: {{contract.counselor_name}}</span></p>
                <p class="title-info">渠道来源: {{contract.channel_name}}</p>
            </div>
            <el-steps :active="getStatus" align-center>
                <el-step title="发起合同">
                    <div slot="description" class="description">
                        <p class="description-title">发起人:{{contract.counselor_name}}</p>
                        <p class="description-time">{{contract.create_time}}</p>
                    </div>
                </el-step>
                <el-step title="资料补全">
                    <div slot="description" class="description">
                        <p class="description-title">{{contract.baby_name ? contract.baby_name : '-'}}/{{contract.mother_mobile ? contract.mother_mobile : '-'}}</p>
                        <p class="description-time">{{contract.sign_time}}</p>
                    </div>
                </el-step>
                <el-step title="缴纳费用">
                    <div slot="description" class="description">
                        <p class="description-title">{{contract.status_test}}{{contract.price}}元</p>
                    </div>
                </el-step>
                <el-step title="签署完毕" description="预览合同">
                    <div slot="description" class="description">
                        <p class="description-title" style="cursor: pointer" @click="previewContract" v-if="contract.status >= 2">预览合同</p>
                    </div>
                </el-step>
                <el-step title="财务审核" description="已通过">
                    <div slot="description" class="description">
                        <p class="description-title">{{contract.status === 4 ? '已通过' : '未通过'}}</p>
                    </div>
                </el-step>
            </el-steps>
            <div class="info-box">
                <div class="specs">
                    <h2>课包规格</h2>
                    <p class="info">
                        <a>
                            <span>课包名称</span>
                            <span>{{contract.class_name}}</span>
                        </a>
                        <a>
                            <span>课包节数</span>
                            <span>{{contract.class_num}}</span>
                        </a>
                        <a>
                            <span>课包价格</span>
                            <span>{{contract.price}}元</span>
                        </a>
                        <a>
                            <span>课包时效</span>
                            <span>时效{{contract.time_limit}}月</span>
                        </a>
                    </p>
                </div>
                <div class="class-detail">
                    <h2>赠课详情</h2>
                    <p class="info">
                        <a>
                            <span>基础赠课</span>
                            <span>{{contract.common_give}}节</span>
                        </a>
                        <a>
                            <span>礼物换课</span>
                            <span>{{contract.sign_gift_give_num ? contract.sign_gift_give_num : '0'}}节</span>
                        </a>
                        <a>
                            <span>特批赠课</span>
                            <span>{{contract.principal_give ? contract.principal_give : '0'}}节</span>
                        </a>
                        <a>
                            <span>备注*</span>
                            <span>{{contract.principal_gift_remark ? contract.principal_gift_remark : '-'}}</span>
                        </a>
                    </p>
                </div>
                <div class="goods-detail">
                    <h2>礼品详情</h2>
                    <p class="info">
                        <a v-for="(item, index) in contract.sign_gift_list" :key="index" data-index="1">
                            <span>礼品{{index + 1}}</span>
                            <span>{{item.name ? item.name : '-'}}</span><span v-show="item.give">(已换课{{item.class_num}}节)</span>
                        </a>
                        <a v-for="(item, index) in contract.principal_gift_list" :key="index + 'xiao-zhang'" data-index="2">
                            <span>特批赠礼{{index + 1}}</span>
                            <span>{{item.name ? item.name : '-'}}</span>
                        </a>
                    </p>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogDetail = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import SignTable from '../../components/sign-table'
    import Pagination from '../../components/pagination'
    import { signList, contractPreview, contractCancel, findDetail } from '../../api/signManagementApi'
    export default {
        data() {
            return {
                tableData: [],
                activeName: 'seven',
                loading: true, // 懒加载loading
                dialogDetail: false, // 详情的dialog
                total: '',
                page: 1,
                status: 0,
                contract: {
                    sign_gift_list: {
                        name: ''
                    },
                    principal_gift_list: {
                        name: ''
                    }
                }
            }
        },
        created() {
            this._signList() // 获取签约列表
        },
        computed: {
            getStatus() {
                let sta = this.contract.status_test
                if (sta === '已发起') {
                    return 1
                } else if (sta === '待签署' || sta === '待支付') {
                    return 2
                } else if (sta === '已付款') {
                    return 4
                } else if (sta === '已完成') {
                    return 5
                } else if (sta === '已作废') {
                    return -1
                }
            }
        },
        methods: {
            async _signList() {
                let data = {p: this.page, length: 10, status: this.status}
                if (this.activeName === 'one') {
                  data = {...data, company_status: 0}
                } else if (this.activeName === 'two') {
                  data = {...data, company_status: 1}
                }
                if (this.$route.query.mid) {
                    data = {...data, mid:this.$route.query.mid}
                }
                const res = await signList(data)
                console.log(res)
                // if (this.status === 1) {
                //   this.tableData = res.data.list.filter(item => item.company_status === 0)
                // }else {
                //   this.tableData = res.data.list
                // }
                this.tableData = res.data.list
                this.total = res.data.total
                this.loading = false

            },
            // tab 点击事件
            handleClick(tab, event) {
                this.loading = true
                this.page = 1
                console.log(tab)
                this.activeName = tab.name
                this.loading = true
                if (this.activeName === 'one') {
                    this.status = 1
                } else if (this.activeName === 'two') {
                    this.status = 1
                } else if (this.activeName === 'three') {
                    this.status = 2
                } else if (this.activeName === 'four') {
                    this.status = 3
                } else if (this.activeName === 'five') {
                    this.status = 4
                } else if (this.activeName === 'six') {
                    this.status = 5
                } else if (this.activeName === 'seven') {
                    this.status = 0
                }

                this._signList() // 获取签约列表
            },
            // 分页的 当前点击的页数
            currentPage(newPage) {
                console.log(`当前标签 ${this.activeName},当前页: ${newPage}`)
                this.page = newPage
                this.loading = true
                this._signList() // 获取签约列表
            },
            async currentDetail(row) {
                // console.log(row)
                this.dialogDetail = true
                let data = {id: row.id}
                const res = await findDetail(data)
                // console.log(res)
                this.contract = res.data.list
                console.log(this.contract)
            },
            async preview(row) {
                // console.log(row)
                let data = {id: row.id}
                const res = await contractPreview(data)
                window.open(res.data.view_url)
            },
            cancel(row) {
                // console.log(row)
                this.$confirm('确定作废该合同, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let data = {id: row.id, status: 5}
                    const res = await contractCancel(data)
                    this.$message.success('已作废!')
                    this._signList() // 获取签约列表
                }).catch(() => {
                    this.$message.info('已取消')
                })
            },
            audit(row) {
                // console.log(row)
                let msg = '审核后合同将归档处理，无法取消和篡改任何信息。请确保该签约的全部信息正确无误后，再点击“确认审核”'
                this.$confirm(msg, '特别注意', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let data = {id: row.id, status: 4}
                    const res = await contractCancel(data)
                    this.$message.success('审核成功!')
                    this._signList() // 获取签约列表
                }).catch(() => {
                    this.$message.info('已取消')
                })
            },
          previewContract() {
            console.log(this.contract)
            this.preview(this.contract)
          }

        },
        components: {
            SignTable,
            Pagination
        },

    };
</script>

<style scoped lang="scss">
    .header-title {
        .title-name {
            font-size: 18px;
            color: #333;
            font-weight: 600;
            margin-bottom: 0;
        }
        .title-info {
            font-size: 11px;
            color: #7d7d7d;
            margin-bottom: 0;
            margin-top: 4px;
        }
    }
    .description {
        .description-title {
            margin: 0;
            padding: 0;
        }
        .description-time {
            margin: 0;
            padding: 0;
        }
    }
    .info-box {
        margin-top: 20px;
        display: flex;
        margin-right: 20px;
        justify-content: space-between;
        div {
            box-sizing: border-box;
            width: 31%;
            /*height: 260px;*/
            background-color: #fff;
            border-radius: 4px;
            font-size: 12px;
            padding: 5px 0 0 20px;
        }
        h2 {
            margin-bottom: 32px;
        }
        .info {
            display: flex;
            flex-direction: column;
            padding-right: 20px;
            a {
                line-height: 28px;
                font-size: 14px;
                span:nth-child(2) {
                    padding-left: 10px;
                }
            }
        }
    }
    .info-box:last-child {
        margin-right: 0;
    }
    .el-row {
        display: flex;
    }
</style>
